{% extends "learning/base.html" %}

{% block title %}记录新错题{% endblock %}

{% block extra_head %}
<style>
    input[type="file"] {
        border: 2px dashed var(--border-medium);
        border-radius: var(--radius-md);
        padding: 1rem;
        cursor: pointer;
        transition: all var(--transition-base);
    }
    
    input[type="file"]:hover {
        border-color: var(--accent);
        background: var(--accent-soft);
    }
    
    .image-preview {
        position: relative;
        display: inline-block;
    }
    
    .image-preview img {
        transition: transform var(--transition-base);
    }
    
    .image-preview:hover img {
        transform: scale(1.02);
    }
</style>
{% endblock %}

{% block content %}
<section class="card" style="max-width:900px;margin:0 auto;">
    <div style="margin-bottom:2rem;">
        <h2 style="margin:0 0 0.5rem 0;">记录新错题</h2>
        <p style="margin:0;color:var(--text-secondary);font-size:1rem;line-height:1.6;">
            详细记录题目、错误原因和反思总结，建立你的个人知识库。记录完成后可以提交给老师批阅，或向 AI 助教提问。
        </p>
    </div>

    <form method="post" enctype="multipart/form-data" style="display:grid;gap:1.25rem;">
        {% csrf_token %}
        
        {% if form.non_field_errors %}
            <div class="message message-error">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}

        {% for field in form %}
            <div>
                <label for="{{ field.id_for_label }}">
                    {{ field.label }}
                    {% if field.field.required %}
                        <span style="color:var(--danger);margin-left:0.25rem;">*</span>
                    {% endif %}
                </label>
                {{ field }}
                {% if field.help_text %}
                    <small style="display:block;color:var(--text-secondary);margin-top:0.5rem;font-size:0.875rem;line-height:1.5;">
                        {{ field.help_text }}
                    </small>
                {% endif %}
                {% if 'image' in field.name %}
                    <div id="preview-{{ field.name }}" style="margin-top:0.75rem;display:none;" class="image-preview">
                        <img src="" alt="预览" style="max-width:100%;max-height:400px;border-radius:8px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);">
                        <p style="margin-top:0.5rem;color:var(--text-secondary);font-size:0.875rem;">✓ 图片已选择，点击"保存错题"后上传</p>
                    </div>
                {% endif %}
                {% for error in field.errors %}
                    <small style="color:var(--danger);display:block;margin-top:0.5rem;font-size:0.875rem;">
                        {{ error }}
                    </small>
                {% endfor %}
            </div>
        {% endfor %}

        <div style="display:flex;gap:1rem;padding-top:1rem;border-top:1px solid var(--border-subtle);">
            <button class="button" type="submit" style="padding:0.75rem 2rem;">
                保存错题
            </button>
            <a class="button secondary" href="{% url 'learning:mistake_list' %}" style="padding:0.75rem 1.5rem;">
                返回列表
            </a>
        </div>
    </form>
</section>

<div style="max-width:900px;margin:2rem auto 0;">
    <div class="card" style="background:var(--accent-soft);border-color:var(--accent-light);">
        <h4 style="margin:0 0 0.75rem 0;color:var(--accent);">💡 记录提示</h4>
        <ul style="margin:0;padding-left:1.25rem;color:var(--text-secondary);line-height:1.7;">
            <li>题目部分：完整记录题干，包括必要的条件和要求</li>
            <li>📸 图片上传：可以拍照或截图上传题目和解题过程，支持 JPG、PNG 格式</li>
            <li>解题过程：详细写出你的解题步骤，即使是错误的</li>
            <li>正确思路：记录正确的解法或老师讲解的方法</li>
            <li>反思总结：分析错误原因，总结知识点和解题技巧</li>
        </ul>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 图片预览功能
    const imageInputs = document.querySelectorAll('input[type="file"][accept*="image"]');
    
    imageInputs.forEach(input => {
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const previewDiv = document.getElementById('preview-' + this.name);
            
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = previewDiv.querySelector('img');
                    img.src = event.target.result;
                    previewDiv.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                previewDiv.style.display = 'none';
            }
        });
    });
});
</script>
{% endblock %}
